<template>
	<view class="index1_content">
		<!-- 导航栏 -->
		<view class="search-header">
			<view @click="handeleTo">
				<image style="width: 15rpx;height: 30rpx;margin-bottom: -15rpx;" src="@/static/index2/index7.png"
					mode=""></image>
			</view>
			<view style="color: #FFFFFF;font-size: 32rpx;margin-right: 10rpx;margin-bottom: -15rpx;">{{$t('费用维护')}}
			</view>
			<view></view>
		</view>

		<!-- 模块 -->

		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Ys2" refresher-enabled="true"
			:refresher-triggered="freshIsShow" @scrolltolower="lower" @refresherrefresh="fresh"
			@refresherrestore="store"
			refresher-background="background: linear-gradient(90deg, #5695FF -2%, #44D1D4 105%);">
			<view class="cost-main" v-for="(item,index) in arr" :key="index">
				<view
					style="width: 100%;display: flex;align-items: center;color: #1D1D1D;font-size: 24rpx;padding: 0 30rpx;box-sizing: border-box;">
					<image style="width: 32rpx;height: 32rpx;" src="@/static/index2/index9.png" mode=""></image>
					<template v-if="item.departure">
						<view style="margin-left: 9rpx;" v-if="lang=='zh'">{{item.departure.name}}</view>
						<view style="margin-left: 9rpx;" v-if="lang=='ru'">{{item.departure.name_ru}}</view>
					</template>
					<image style="width: 32rpx;height: 32rpx;margin-left: 9rpx;" src="@/static/index2/index10.png">
					</image>
					<template v-if="item.reach">
						<view style="margin-left: 9rpx;" v-if="lang=='zh'">{{item.reach.name}}</view>
						<view style="margin-left: 9rpx;" v-if="lang=='ru'">{{item.reach.name_ru}}</view>
					</template>
				</view>
				<view style="border-top: 1px dashed #D8D8D8;margin-top: 20rpx;"></view>
				<view class="cost-utils-class" style="margin-top: 24rpx;">
					{{$t('到货时间')}}:{{item.send_start_day}}-{{item.send_end_day}}{{$t('天')}}
				</view>
				<view class="cost-utils-class" style="margin-top: 16rpx;">{{$t('阶梯费用')}}</view>
				<view style="width: 100%;height: 19rpx;"></view>
				<view v-for="(ite,ind) in item.cost_list" :key="ind" style="margin-top: 20rpx;">
					<view class="cost-utils-class">{{$t('密度区间')}}：{{ite.min_density}}-{{ite.max_density}} kg/m³</view>
					<view class="cost-utils-class" style="margin-top: 16rpx;">{{$t('价格')}}：{{ite.price}}/kg
						({{$t("元")}})</view>
					<view style="border: 1rpx solid #D8D8D8;width: 630rpx;margin: 0 auto;margin-top: 16rpx;"></view>
				</view>
				<view class="cost-remarks" v-if="lang=='zh'">{{$t('备注')}}:{{item.remark}}</view>
				<view class="cost-remarks" v-if="lang=='ru'">{{$t('备注')}}:{{item.remark_ru}}</view>

				<view class="cost_buts">
					<view class="cost-but1" @click="handeleRemove(item,index)">{{$t('删除')}}</view>
					<view class="cost-but2" @click="handeleEdit(item)">{{$t('编辑')}}</view>
				</view>
			</view>

		</scroll-view>

		<!-- 新增 -->
		<view class="cost-add-block">
			<view class="cost-add" @click="handeleAdd">{{$t('新增费用')}}</view>
		</view>
		<!-- 顶部背景色 -->
		<image style="width: 750rpx;height: 690rpx;position: absolute;top: 0;z-index: 1;"
			src="@/static/index2/20241101130857.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: getApp().globalData.lang,
				scrollTop: 0, //高度
				freshIsShow: true, //下拉加载
				page: 1, //页数
				total: 0, //总条数
				arr: [], //数据
			}
		},
		onShow() {
			this.getData(true)
		},
		onLoad() {},
		methods: {
			// 删除
			handeleRemove(item, index) {
				uni.showModal({
					title: this.$t('确认删除'),
					content: this.$t('是否确认删除当前文件'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							this.arr.splice(index, 1) //删除对应下标数据

							this.$u.api.transport.cost_del({
								id: item.id
							}).then(res => {

							})



							//调删除接口
						} else if (res.cancel) {}
					}
				});
			},
			// 编辑
			handeleEdit(item) {
				uni.navigateTo({
					url: '/pages/tabbar/order/costMainEdit?item=' + JSON.stringify(item)
				})
			},
			// 新增
			handeleAdd() {
				uni.navigateTo({
					url: '/pages/tabbar/order/costMainEdit'
				})
			},
			// 获取数据
			getData(init) {
				console.log('获取数据');
				if (init) {
					this.page = 1
					this.freshIsShow = true
				}
				var that = this

				that.$u.api.transport.cost_lists({
					page: that.page
				}).then(res => {
					console.log(res)
					that.arr = res.list
					that.total = res.count
					this.freshIsShow = false
				})
			},
			// 返回上一页
			handeleTo() {
				uni.navigateBack()
			},
			// 下拉刷新复位
			store() {
				this.freshIsShow = false
			},
			// 下拉刷新触发
			fresh() {
				this.getData(true)
			},
			// 触底加载
			lower() {
				// 触底判断总条数不等于当前数据的条数则获取数据
				if (this.total != this.arr.length) {
					this.getData()
				}
			},
		}
	}
</script>

<style scoped>
	.scroll-Ys2 {
		margin-top: 24rpx;
		z-index: 2;
		width: 690rpx;
		height: calc(100vh - 280rpx);
	}

	.cost-add-block {
		background-color: #F1F2F4;
		z-index: 3;
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 0;
	}

	.cost-but1 {
		width: 305rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #FF5D5D;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.cost-but2 {
		width: 305rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background: #5282E6;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.cost_buts {
		width: 100%;
		height: 60rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.cost-remarks {
		color: #9E9E9E;
		font-size: 24rpx;
		margin-top: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.cost-utils-class {
		color: #1D1D1D;
		font-size: 24rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.cost-add {
		width: 540rpx;
		height: 90rpx;
		border-radius: 90rpx;
		background: #5282E6;
		color: #FFFFFF;
		font-size: 28rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.cost-main {
		z-index: 2;
		width: 690rpx;
		min-height: 139rpx;
		border-radius: 32rpx;
		background: #FFFFFF;
		padding: 36rpx 0rpx 22rpx 0rpx;
		margin-bottom: 24rpx;
	}

	.search-header {
		z-index: 2;
		width: 690rpx;
		height: 103rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;
		margin-bottom: -20rpx;
	}

	.index1_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F1F2F4;
		height: 100vh;
	}
</style>